You create animated GIFs in Fireworks using frames. Each frame contains a different image. Elements that you want to appear in all frames are placed on a separate layer that is shared among all the frames. As the sequence of frames is displayed in order, it creates the illusion of movement.
1 | Open the document Animated_Start.png located in the Tutorial folder in the Fireworks application folder.
![]() |
2 | Display the Layers panel and click the New / Duplicate Layer button at the bottom of the panel.
|
Now you'll move the thumbnails onto the new layer. | |
3 | Select the four thumbnails by Shift-clicking each image with the Pointer tool.
|
The blue square in the column to the right of Layer 1 in the Layers panel indicates that the selection is on that layer. | |
4 | Drag the blue square that is next to Layer 1 to the new layer, Layer 2.
|
Now you can share Layer 1 across frames so that the text appears in each frame of the animation. | |
5 | Select Layer 1 in the Layers panel. |
6 | Open the options pop-up menu on the Layers panel (click the triangle at the top of the panel) and choose Share Layer. Notice that a filmstrip icon appears to the right of the layer name to indicate that the layer is shared across frames.
|
7 | Shift-click the thumbnails to select them again. |
8 | Drag the thumbnails on top of the text and align them over the last four letters in the logo.
![]() |
Next you'll distribute the thumbnails to separate frames to create the animation. | |
9 | Display the Frames panel and click the Distribute to Frames button at the bottom of the panel.
|
10 | Display the Optimize panel and choose Animated GIF from the export file format pop-up menu. You have to use Animated GIF to export all the frames to the file. Using GIF would export only the first frame.
|
11 | Shift-click all the frames in the Frames panel and choose Properties from the options menu on the panel. (Click the triangle at the top of the panel.)
|
12 | Set the frame delay to 50 (which is a half-second) and press Enter (Windows) or Return (Macintosh). The frame delay sets the speed for the animation.
|
13 | Click the Play button at the bottom of the application window (Windows) or the document window (Macintosh). Note that play button changes to a stop button as the animation plays. Click the stop button to stop the animation.
|
14 | Choose File > Save As, name the document my_animation, and click Save. If desired, export the file and test it in a browser. |
![]() |
Congratulations on completing the Fireworks tutorial. You're now ready to create your own artwork using Fireworks.